<!DOCTYPE html>
<html>
<head>
    <%include("/back/_include/meta.html",{"title":""}){}%>
    <%include("/back/_include/style.html"){}%>
    <link href="/assets/ui/h+/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/assets/back/plugin/My97DatePicker/skin/whyGreen/datepicker.css" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-content">
                    <div id="toolbar">
                        <div class="btn-group">
                            <button class="btn btn-primary" id="add">
                                <i class="glyphicon glyphicon-plus"></i>
                            </button>
                            <button class="btn btn-danger" id="trash">
                                <i class="glyphicon glyphicon-trash"></i>
                            </button>
                        </div>
                    </div>
                    <form role="form" class="form-inline">
                        <div class="form-group">
                            <label>账号</label>
                            <input type="text" id="account" name="account" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>昵称</label>
                            <input type="text" id="nickname" name="nickname" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>创建人</label>
                            <input type="text" id="creator" name="creator" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>创建日期</label>
                            <input class="Wdate form-control" id="gmtCreate" readonly type="text"
                                   onClick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
                        </div>
                        <button class="btn btn-sm btn-primary" type="button" id="search">
                            <strong>查询</strong>
                        </button>
                    </form>
                    <table id="table"
                           data-classes="table table-hover table-condensed"
                           data-sort-name="gmt_create"
                           data-sort-order="asc"
                           data-show-columns="true"
                           data-height="700"
                           data-search="true"
                           data-show-refresh="true"
                           data-show-toggle="true"
                           data-toolbar="#toolbar"
                           data-striped="true"
                           data-search-on-enter-key="true"
                           data-strict-search="false"
                    ></table>
                </div>
            </div>
        </div>
    </div>
</div>

<%include("/back/_include/script.html"){}%>
<script src="/assets/ui/h+/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/assets/ui/h+/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/assets/back/plugin/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
    $(function () {
        var $table = $('#table').bootstrapTable({
            url: '/b/admin/page',
            pagination: true,
            paginationLoop: true,
            showFullscreen: true,
            sidePagination: 'server',
            pageList: [5, 10, 20, 50],
            queryParams: function (params) {
                params.account = $$('#account');
                params.nickname = $$('#nickname');
                params.creator = $$('#creator');
                params.gmtCreate = $$('#gmtCreate');
                return params;
            },
            columns: [
                {
                    field: 'id', title: '编号', checkbox: true, formatter: function (value, row, index) {
                        return "<span class='hide'>" + value + "</span>"
                    }
                }, {
                    title: '账号',
                    field: 'account',
                    sortable: true
                }, {
                    title: '昵称',
                    field: 'nickname',
                    sortable: true
                }, {
                    title: '创建人',
                    field: 'creator',
                    formatter: function (value, row, index) {
                        return value ? value.nickname : "-"
                    }
                }, {
                    title: '状态',
                    field: 'locked',
                    sortable: true,
                    formatter: function (value, row, index) {
                        return value == true ? "正常" : "禁用"
                    }
                }, {
                    title: '创建时间',
                    field: 'gmt_create',
                    sortable: true,
                    formatter: function (value, row, index) {
                        return timestampToDate(value)
                    }
                }, {
                    title: '操作',
                    formatter: function (value, row, index) {
                        var id = row.pkvalueList[0];
                        return [
                            '<div class="btn-group">\
                                <button data-toggle="dropdown" class="btn btn-default btn-sm dropdown-toggle" aria-expanded="false">操作\
                                    <span class="caret"></span>\
                                </button>\
                                <ul class="dropdown-menu" data-id="' + id + '">\
                                    <li>\
                                        <a href="#" class="edit text-warning">修改</a>\
                                    </li>\
                                    <li>\
                                        <a href="#" class="unlock ' + (!row.locked || row.locked === false ? "hide" : '') + ' text-info">启用</a>\
                                    </li>\
                                    <li>\
                                        <a href="#" class="lock ' + (row.locked === true ? "hide" : '') + ' text-danger">禁用</a>\
                                    </li>\
                                    <li class="divider"></li>\
                                    <li>\
                                        <a href="#" class="delete font-bold">删除</a>\
                                    </li>\
                                </ul>\
                            </div>',
                            '<button type="button" data-id="' + id + '" class="group btn btn-sm btn-info">分组</button>',
                            '<button type="button" data-id="' + id + '" class="ip btn btn-sm btn-primary">登录ip设置</button>'
                        ].join(' ');
                    }
                }
            ]
        });
        $('#search').click(function () {
            $('#table').bootstrapTable('refresh');
        })
        $(document).on("click", '#trash', function () {
            var result = $table.bootstrapTable('getSelections');
            var ids = "";
            for (var i = 0; i < result.length; i++) {
                var item = result[i];
                ids += item.pkvalueList[0] + ",";
            }
            if (isEmpty(ids)) {
                error("请选择要删除的记录")
                return
            }
            confirm2("删除后不可恢复!", function () {
                get("/b/admin/delete?ids=" + ids, function (res) {
                    if (!res.success) {
                        error(res.msg)
                        return;
                    }
                    var index = success("删除成功", false, function () {
                        $('[name="refresh"]').trigger("click")
                        layer.close(index)
                    })
                }, function () {
                    systemErr();
                })
            })
        });
        $(document).on("click", '#add', function () {
            layer.open({
                type: 2,
                title: '新增用户',
                shadeClose: true,
                shade: 0.2,
                area: ['780px', '90%'],
                content: '/b/admin/add'
            });
        })
        //删除
        $(document).on("click", '.delete', function () {
            get('/b/admin/delete?ids=' + $(this).parents("ul").data("id"), function (res) {
                if (!res.success) {
                    error(res.msg)
                    return
                }
                var a = success("已删除", false, function () {
                    layer.close(a)
                    $('#table').bootstrapTable('refresh');
                })
            }, function () {

            })
        })
        //禁用
        $(document).on("click", '.lock', function () {
            get('/b/admin/lock?id=' + $(this).parents("ul").data("id"), function (res) {
                if (!res.success) {
                    error(res.msg)
                    return
                }
                var a = success("已禁用", false, function () {
                    layer.close(a)
                    $('#table').bootstrapTable('refresh');
                })
            }, function () {

            })
        })
        //启用
        $(document).on("click", '.unlock', function () {
            get('/b/admin/unlock?id=' + $(this).parents("ul").data("id"), function (res) {
                if (!res.success) {
                    error(res.msg)
                    return
                }
                var a = success("已解禁", false, function () {
                    layer.close(a)
                    $('#table').bootstrapTable('refresh');
                })
            }, function () {

            })
        })
        //编辑
        $(document).on("click", '.edit', function () {
            layer.open({
                type: 2,
                title: '编辑用户',
                shadeClose: true,
                shade: 0.2,
                area: ['780px', '90%'],
                content: '/b/admin/edit?id=' + $(this).parents("ul").data("id")
            });
        })
        $(document).on("click", '.ip', function () {
            layer.open({
                type: 2,
                title: '设置登录ip',
                shadeClose: true,
                shade: 0.2,
                area: ['90%', '98%'],
                content: '/b/loginIp?admin_id=' + $(this).data("id")
            });
        })
        $(document).on("click", '.group', function () {
            ajaxHtml("/b/group/select?adminId=" + $(this).data("id"), function (res) {
                if (res.success === false) {
                    error("加载设置分组页面失败")
                    return;
                }
                configModal("#modal", "设置用户分组", res);
                $('#modal_btn').trigger("click");
            });
        })
    });
</script>
</body>
</html>
